<template>
  <el-container v-if="config" class="list-page">
    <slot name="left" />
    <el-main class="f-c-g">
      <el-header ref="head" :class="['settings', { open: isOpen }]">
        <com-form
          ref="form"
          class="search-form"
          size="mini"
          :form="config.searchItem"
          inline
          :disabled="load"
        >
          <template slot="last-item">
            <li v-if="config.searchItem" slot="first-btn" class="btn">
              <el-button style="margin-right:10px;" type="primary" size="small" @click="search">搜索</el-button>
            </li>
            <!-- <div class="pageBtnsL"> -->
            <com-btns
              v-if="table"
              size="small"
              :btns="config.pageBtns"
              :page="page"
              :table="table"
              :item="table.selection"
              :reload="search"
              :set-config="setConfig"
              :re-select="table.setCurrentRow"
            />
            <!-- </div> -->

          </template>
        </com-form>
      </el-header>
      <el-main class="list-table">
        <con-table
          v-if="searchList && show"
          ref="table"
          :config="config"
          :on="on"
          :search-list="searchList"
          :other-search="otherSearch"
        />
      </el-main>
      <slot />
    </el-main>
  </el-container>
  <el-alert v-else title="list模板缺少config配置" type="error" />
</template>
<script>
import { Container, Header, Main, Button, Alert } from 'element-ui'
import { comForm, comBtns, testTable } from 'qh-common'
export default {
  components: {
    conTable: testTable,
    comForm,
    comBtns,
    elContainer: Container,
    elHeader: Header,
    elMain: Main,
    elButton: Button,
    elAlert: Alert
  },
  props: {
    config: Object
  },
  data() {
    const more = window.config.more
    return {
      searchList: null,
      otherSearch: null,
      table: null,
      page: this,
      load: false,
      show: true,
      showOther: false,
      isOpen: !more || false,
      more
    }
  },
  computed: {
    on() {
      const on = this.config.on || {}
      on.over = () => {
        this.load = false
      }
      return on
    },
    conTable() {
      return this.$refs.table
    }
  },
  mounted() {
    if (this.$refs.form) {
      this.searchList = this.$refs.form.getDatas()
      this.$nextTick(() => {
        this.table = this.$refs.table
      })
      this.showOther = this.more && this.$refs.form.$el.scrollHeight > this.$refs.head.$el.offsetHeight
    }
  },
  methods: {
    toLoad() {
      this.load = true
      this.$refs.table.load = true
    },
    open() {
      this.isOpen = !this.isOpen
    },
    reDraw() {
      this.show = false
      this.$nextTick(() => {
        this.show = true
      })
    },
    setConfig(cb) {
      if (cb) {
        cb(this.config, this.reDraw)
      }
    },
    search(e) {
      this.load = true
      this.searchList = this.$refs.form.getDatas()
      this.$nextTick(() => this.$refs.table.getData(1))
    },
    clear() {
      this.load = true
      for (const key in this.searchList) {
        this.searchList[key] = ''
      }
      this.$refs.form.setDatas(this.searchList)
      this.$refs.table.getData(1)
    },
    getData(isClear) {
      this.load = true
      if (isClear) {
        this.clear()
      }
      this.$refs.table.getData()
    }

  }
}
</script>
